<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .top {
            width: 10rem;
            height: 2.333333rem;
        }
        
        .one {
            display: flex;
            justify-content: space-between;
            height: 1.066667rem;
        }
        
        .one .one-left {
            width: 1.44rem;
            height: .48rem;
            font-size: 15px;
            color: #000;
            margin: .426667rem .56rem;
            font-family: Helvetica;
            font-weight: 600;
        }
        
        .center {
            margin-left: .293333rem;
            margin-right: .266667rem;
            display: flex;
            justify-content: space-between;
            margin-top: .8rem;
        }
        
        .cee {
            background: #F0F2F7;
        }
        
        .banner {
            margin-top: .906667rem;
        }
        
        .banner1 {
            margin-left: .426667rem;
        }
        
        .box1 {
            margin-left: .426667rem;
            margin-top: .266667rem;
            width: 6.72rem;
            height: .746667rem;
            font-size: 20px;
            font-family: "苹方-繁 中粗体";
            font-weight: 600;
            color: #313131;
            line-height: .746667rem;
        }
        
        .box2 {
            margin-left: .426667rem;
            margin-top: .266667rem;
            width: 4.96rem;
            height: .746667rem;
            font-size: 20px;
            font-family: "苹方-繁 中粗体";
            font-weight: 600;
            color: #ccc;
            line-height: .746667rem;
        }
        
        .box3 {
            margin-left: .426667rem;
            /* background: url(./image/Rounded rectangle1.png); */
            width: 344px;
            height: 135px;
            background-color: #fff;
        }
        
        .box3-bb {
            margin-left: .48rem;
        }
        
        .box3-aa {
            width: 3.173333rem;
            height: .586667rem;
            font-size: 14px;
            font-family: "苹方-繁 中粗体";
            font-weight: 600;
            color: #313131;
            line-height: .586667rem;
        }
        
        .box3-cc {
            margin-left: .746667rem;
            width: 2.24rem;
            height: .48rem;
            font-size: 12px;
            font-family: "苹方-繁 常规体";
            font-weight: 400;
            color: #313131;
            line-height: .48rem;
        }
        
        .box3-dd {
            width: 1.866667rem;
            height: .586667rem;
            font-size: 14px;
            font-family: "苹方-繁 中粗体";
            font-weight: 600;
            color: #313131;
            line-height: .586667rem;
        }
        
        .box3-ee {
            width: 2.64rem;
            height: .533333rem;
            font-size: 14px;
            font-family: "苹方-繁 中粗体";
            font-weight: 600;
            color: #708BF3;
            line-height: .533333rem;
        }
        
        .box3-ff {
            height: .533333rem;
            line-height: .426667rem;
        }
        
        .box3-gg {
            width: .24rem;
            height: .586667rem;
            font-size: 14px;
            font-family: "苹方-繁 中粗体";
            font-weight: 600;
            color: #313131;
            line-height: .586667rem;
        }
        
        .box4 {
            margin-left: .426667rem;
            width: 2.133333rem;
            height: .746667rem;
            font-size: 20px;
            font-family: "苹方-繁 中粗体";
            font-weight: 600;
            color: #313131;
            line-height: 28px;
        }
        
        .box5 {
            margin-left: .426667rem;
            width: 9.12rem;
            height: 2.666667rem;
            font-size: 12px;
            font-family: "苹方-繁 常规体";
            font-weight: 400;
            color: #313131;
            line-height: 18px;
        }
        
        .box6 {
            background: url(./image/Button.png) no-repeat;
            color: #fff;
            text-align: center;
            margin-left: .426667rem;
            font-size: 20px;
            height: 1.333333rem;
            line-height: 1.333333rem;
        }
    </style>
</head>

<body>
    <script src="./flexible.js"></script>
    <div class="con">
        <div class='top'>
            <div class="one">
                <div class="one-left">
                    <span>9:41</span>

                </div>
                <div class="one-right"><img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1be20f0eced1f466b6b4dc3a981fc6b52a4b9cf391debed94bcf2e01f7c38668" alt="">
                    <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga05957db16243a63d7c74f823baeb36bbafa63e1b3e30902724223c367fb5eeb" alt="">
                </div>
            </div>
            <div class="center">
                <div><img src="./image/ic_return.png" alt=""></div>
                <div><span>LC</span></div>
                <div><img src="./image/ic_scanning.png" alt=""></div>
            </div>
        </div>
        <div class="cee">
            <div class="banner"><img src="./image/picture.png" alt=""></div>
            <div class="banner1"><img src="./image/Rounded rectangle.png" alt=""></div>
            <div class='box1'>
                <p>EF China Talk - Road Trip</p>
            </div>
            <div class="box2">
                <p>英孚中国 - 公路旅行</p>
            </div>
            <div class="box3">
                <div class="box3-bb">
                    <img src="./image/ic_date.png" alt="">
                    <span class="box3-aa">2021.05.09 星期三</span>
                    <p class="box3-cc">11:00～11：50</p>
                    <img src="./image/ic_Number of people.png" alt="">
                    <span class="box3-dd">等候人数：</span>
                    <span class="box3-gg">6</span>
                    <div class="box3-ff">
                        <img src="./image/ic_Photography.png" alt="">
                        <span class="box3-ee">线上 Zoom平台</span>
                    </div>

                </div>

            </div>
            <div class="box4">
                <p>课堂信息</p>
            </div>
            <div class="box5">
                <p>EF China Talk is a national program where students will have the opportunity to express their pride in their national and cultural heritage, while showcasing their presentation and performance skills. In EF Online: China Talk, you will
                    have the opportunity to express your cultural pride and </p>
            </div>
            <div class="box6">等待</div>
        </div>
    </div>
</body>

</html>